<template>
  <el-row :gutter="24">
    <el-col :span="8">
      <ElCard shadow="hover" :title="99999">
        <template #header>
          <div style="font-size: 18px; color: #606266">员工总数 <el-icon>
              <User />
            </el-icon></div>
        </template>

        <CountTo :startVal="startEmployees" :endVal="endEmployees" :duration="3000" style="font-size: 22px"></CountTo>
      </ElCard>
    </el-col>
    <el-col :span="8">
      <ElCard shadow="hover">
        <template #header>
          <div style="font-size: 18px; color: #606266">出勤人数 <el-icon>
              <Avatar />
            </el-icon></div>
        </template>
        <CountTo :startVal="startAttendance" :endVal="endAttendance" :duration="3000" style="font-size: 22px"></CountTo>
      </ElCard>
    </el-col>
    <el-col :span="8">
      <ElCard shadow="hover">
        <template #header>
          <div style="font-size: 18px; color: #606266">请假人数 <el-icon>
              <UserFilled />
            </el-icon></div>
        </template>
        <CountTo :startVal="startLeave" :endVal="endLeave" :duration="3000" style="font-size: 22px"></CountTo>
      </ElCard>
    </el-col>
  </el-row>

  <ElCard style="margin-top: 20px;">
    <div id="chart" style="width: 100%; height: 500px"></div>
  </ElCard>
</template>

<script>
import { User, UserFilled, Avatar } from '@element-plus/icons-vue';
import { ElCard } from 'element-plus';
import { CountTo } from 'vue3-count-to';
import * as echarts from 'echarts';
import axios from 'axios';

export default {
  components: { CountTo, ElCard },
  data() {
    return {
      startEmployees: 0,
      endEmployees: 0,
      startAttendance: 0,
      endAttendance: 0,
      startLeave: 0,
      endLeave: 0,
    };
  },

  async mounted() {
    console.log( this)
    const result = await this.getData();
    console.log(result);

    // 设置卡片的数据
    const currentData = result?.data.data[0];
    console.log(currentData);
    this.endEmployees = currentData.employees
    this.endAttendance = currentData.attendance
    this.endLeave = currentData.approval

    // 日期坐标
    let xAxisData = [];
    let seriesAttendance = []; // 出勤
    let seriesApproval = []; // 请假

    result?.data.data.forEach(element => {
      // 把后面的数据放到前面
      xAxisData.unshift(element.checkDate);
      seriesAttendance.unshift(element.attendance);
      seriesApproval.unshift(element.approval);
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: '近七天的出勤情况',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['出勤人数', '请假人数'],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '出勤人数',
          type: 'line',
          emphasis: {
            focus: 'series',
          },
          data: seriesAttendance,
        },
        {
          name: '请假人数',
          type: 'line',
          emphasis: {
            focus: 'series',
          },
          data: seriesApproval,
        },
      ],
    });
  },

  methods: {
    async getData() {
      //发送ajax请求
      return await axios
        .get(
          'http://localhost:8080/analyse'
        )
    },
  },
};
</script>